<script setup lang="ts">
import { ref } from 'vue';
import Index from './icons/tabbar/Index.vue';
import ActiveIndex from './icons/tabbar/ActiveIndex.vue';
import Teacher from './icons/tabbar/Teacher.vue';
import My from './icons/tabbar/My.vue';
import ActiveMy from './icons/tabbar/ActiveMy.vue';
import ActiveTeacher from './icons/tabbar/ActiveTeacher.vue';
import ActiveCommunity from './icons/tabbar/ActiveCommunity.vue';
import Community from './icons/tabbar/Community.vue';
import ActiveMessage from './icons/tabbar/ActiveMessage.vue';
import Message from './icons/tabbar/Message.vue';

const active = ref(0)

</script>


<template>
    <div class="container">
        <van-tabbar route v-model="active">
            <van-tabbar-item to="/home">
                <p class="title">主页</p>
                <template #icon="" class="icon">
                    <div>
                        <div v-if="active === 0">
                            <ActiveIndex />
                        </div>
                        <div v-else>
                            <Index />
                        </div>
                    </div>
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/assistant">
                <p class="title">助教</p>
                <template #icon="" class="icon">
                    <div>
                        <div v-if="active === 1">
                            <ActiveTeacher />
                        </div>
                        <div v-else>
                            <Teacher />
                        </div>
                    </div>
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/community">
                <p class="title">社区</p>
                <template #icon="" class="icon">
                    <div>
                        <div v-if="active === 2">
                            <ActiveCommunity />
                        </div>
                        <div v-else>
                            <Community />
                        </div>
                    </div>
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/message">
                <p class="title">消息</p>
                <template #icon="" class="icon">
                    <div>
                        <div v-if="active === 3">
                            <ActiveMessage />
                        </div>
                        <div v-else>
                            <Message />
                        </div>
                    </div>
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/my">
                <p class="title">我的</p>
                <template #icon="" class="icon">
                    <div>
                        <div v-if="active === 4">
                            <ActiveMy />
                        </div>
                        <div v-else>
                            <My />
                        </div>
                    </div>
                </template>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<style scoped lang="scss">
.container {
    display: flex;
    flex-basis: 50px;
}
.title {
    padding: 0%;
    margin: 0%;
}
</style>
